<script setup lang="ts">
import {
  getPartyMemberData,
  setPartyMemberData
} from '@/service/api/sys/dataWarehouse/party'
import SvgIcon from '@/common/svg-icon/SvgIcon.vue'
import { ElMessage } from 'element-plus'
interface formItemType {
  year?: Number | String
  developmentNumber?: Number | String
}
interface formType {
  year?: Number | String
  partyOrgId?: Number | String
  partyMemberTotal?: Number | String
  createDtm?: Number | String
  formalPartyMember?: Number | String
  probationaryPartyMember?: Number | String
  updateDtm?: Number | String
  fiveYearDevelopmentList?: Array<formItemType>
}
const props = defineProps({
  filterRule: {
    type: Object,
    default: () => ({
      partyOrgId: 1,
      year: 2023
    })
  }
})

const Form = ref<formType>({}) // 表
const disabled = ref(false) // 当前可编辑的状态: 可编辑 不可编辑

// 获取区域概况 更改当前编辑状态未不可编辑
const updateArea = async () => {
  const res = await getPartyMemberData(props.filterRule)
  Form.value = res.data || {}
  disabled.value = false
}

// 监测传入的筛选条件改变, 获取数据
watch(
  () => props.filterRule,
  () => updateArea(),
  {
    immediate: true,
    deep: true
  }
)

// 更改编辑表格的内容, 利用div来做编辑的方法
const setForm = (field: string, val: any, key?: number) => {
  if (key) {
    const editType = Form.value.fiveYearDevelopmentList as Array<formItemType>
    editType[key].developmentNumber = val
  } else {
    Form.value[field] = val
  }
  console.log(Form.value)
  /*const editType = Form.value[key] as { [k: string]: string | number }
  editType[field] = val*/
}

// 保存编辑
const changeDisabled = () => {
  if (props.filterRule.partyOrgId > 0 && props.filterRule.year > 0) {
    // 保存
    if (disabled.value) {
      const data = { ...Form.value }
      console.log(data)
      setPartyMemberData(data)
        .then(() => {
          ElMessage.success('保存成功!')
        })
        .catch(() => {
          ElMessage.error('保存失败!')
        })
      setTimeout(() => {
        updateArea()
      }, 500)
    } else {
      disabled.value = true
    }
  } else {
    ElMessage.warning('暂无数据, 无法编辑!')
  }
  console.log(Form.value)
}
</script>

<template>
  <div class="warehouse">
    <div class="title">党员管理</div>
    <div class="content flex flex-col p-5">
      <div class="grid flex-1 grid-cols-4 gap-3.5">
        <div class="item">
          <div class="label">党员总数</div>
          <div class="main">
            <div
              :contentEditable="disabled"
              v-text="Form.partyMemberTotal"
              @blur="setForm('partyMemberTotal', $event.target.innerHTML)"
              class="text"
            />
            <span class="ml-1 text-[--auxiliary]">人</span>
          </div>
        </div>
        <div class="item">
          <div class="label">正式党员</div>
          <div class="main">
            <div
              :contentEditable="disabled"
              v-text="Form.formalPartyMember"
              @blur="setForm('formalPartyMember', $event.target.innerHTML)"
              class="text"
            />
            <span class="ml-1 text-[--auxiliary]">人</span>
          </div>
        </div>
        <div class="item">
          <div class="label">预备党员</div>
          <div class="main">
            <div
              :contentEditable="disabled"
              v-text="Form.probationaryPartyMember"
              @blur="
                setForm('probationaryPartyMember', $event.target.innerHTML)
              "
              class="text"
            />
            <span class="ml-1 text-[--auxiliary]">人</span>
          </div>
        </div>
      </div>
      <div class="my-3 mt-3.5 grid grid-cols-4">
        <div
          class="flex items-center justify-between border border-dashed border-[--auxiliary] px-2.5 shadow-inner shadow-[#0da7c1]"
        >
          <span class="text-sm font-bold text-white">发展情况</span>
          <span class="text-xs text-[#5E9DB4]">近 5 年</span>
        </div>
      </div>
      <div class="grid flex-1 grid-cols-4 gap-3.5">
        <div
          v-for="(item, index) in Form.fiveYearDevelopmentList"
          :key="index"
          class="item"
        >
          <div class="label">{{ item.year }}</div>
          <div class="main">
            <div
              :contentEditable="disabled"
              v-text="Form.fiveYearDevelopmentList?.[index].developmentNumber"
              @blur="
                setForm('developmentNumber', $event.target.innerHTML, index)
              "
              class="text"
            />
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <el-link v-show="!disabled" :underline="false" @click="changeDisabled">
        <svg-icon name="icon-system-button-bianji" width="14px" height="12px" />
        <span class="text-[--theme]">编辑</span>
      </el-link>
      <el-button
        v-show="disabled"
        type="primary"
        class="button_function"
        @click="changeDisabled"
        size="small"
        >保存</el-button
      >
    </div>
  </div>
</template>

<style scoped></style>
